<script setup>
import { reactive, watch } from 'vue'

const obj = reactive({ count: 0 ,num: 0, address: { city: 'beijing' ,num:8}})

// 直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
  console.log(`newValue is ${newValue.count} and oldValue is ${oldValue.count}`)
})

// 相比之下，一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调：
watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 仅当 state.someObject 被替换时触发
    console.log(`newValue obj.count is ${newValue} and oldValue obj.count is ${oldValue}`)
  }
)

//你也可以给上面这个例子显式地加上 deep 选项，强制转成深层侦听器：
watch(
  () => obj.address.num,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
    console.log(`newValue obj.address.num is ${newValue} and oldValue obj.address.num is ${oldValue}`)
  },
  { deep: true }
)

</script>
<template>
    <div>{{obj}}</div>
    <button @click="obj.count++">count++</button>
    <button @click="obj.num++">num++</button>
    <button @click="obj.address.num++">address.num++</button>
</template>